Hey there.
Welcome back.
In this lecture we're going to be learning about a new service and a new feature in the Roblox API.
The new service we're going to be learning about is the text chat service.
And the other feature we're going to learn about is called Rich Text Markup.
The text chat service is a new chat API that came out in June of 2022 to replace the Legacy Chat API.
The purpose of this new service is to make interacting with the chat system easier, and to provide
more customization options relating to chat.
Here we can read in the Roblox documentation that the text chat service is a service for handling inexperienced
text chat.
It handles various text chat related tasks such as managing channels, decorating messages, filtering
text, creating commands, and developing custom chat interfaces.
This service comes with a few properties, functions, events, and even some callbacks that we can
go ahead and use to modify the text in our game.
These two callbacks allow you to attach functions to them, and the functions you attach to these properties
will be executed before either a message bubble appears or before a message in the chat appears, allowing
you to customize those messages.
There's also a function where we can go ahead and pass a player or a part in our game, and have that
part or player display a chat bubble, just like a real player would.
For this lecture, we're going to be taking a look at both of these callbacks and how we can customize
both messages and chat messages using rich text markup for VIP players in our game, Rich text markup
is a feature that allows us to customize text in many different ways, such as adding a stroke to a
specific chunk of text, changing the color of certain chunks of text, italicizing text, and so on,
all within the string itself.
Here we can read that rich text markup or UI rich text utilizes simple markup tags to style sections
of string and bold italics, underline, fill, color, stroke variations, and more.
You can apply styling tags to text labels, text buttons, and text box objects.
And here is all of the different tags that are supported within rich text markup.
So you would pass a string, and then you would pass in the special keywords or these special chunks
of text to modify the original text.
For example, here, if we have a string that says, I want the orange candy, we can insert these special
chunks of text to go ahead and modify a certain chunk of text.
So we modify this orange word right here to make it actually display orange in the game.
You can also modify the size of text, the type of font, the font family, the weight of the font.
You can add, a stroke, transparency.
You can make certain text bold italicized underline.
You can add strikethroughs.
You can insert line breaks, make certain chunks of text uppercased, or have small upper cases.
And you can even add comments inside of these rich text formatted strings.
Here, we can actually view the text chat service inside of the explorer menu in studio and inside of
the text chat service, we have a few things that we can actually customize to manipulate how text appears
in our game.
For example, if you wanted to configure the chat window which appears on the top left of the screen,
then it gives us some options for changing.
For example, the font, the background color, the transparency, the text color and size, as well
as the text stroke and the text stroke transparency, as well as another few extra options.
We can do the exact same thing here, with the bubble chat that appears over players heads, as well
as manipulating the input bar where we enter in text to our chat window.
This bubble chat configuration also has some other additional stuff that we can modify, such as the
UI corner for bubble text, the UI gradient, we can change the padding, and you can even add an image
label within these bubble chats.
So if we go and playtest the game and we take a look at the regular text chat window, which is this
right here?
As you can see, it looks pretty basic.
We have a black transparent background with a darker input bar and a button right here to enter in our
text.
Pretty simple, and we are able to manipulate or change how this box appears in our game by going to
the text chat service.
So let's say we want to change the background color of the chat window, for example.
Maybe we don't want it to be black, but we would like it to be, I don't know, maybe a dark orange.
So if we change the color here.
And do something like that.
And then we went to go play test our game.
Now if we go open our window, as you can see, it has changed the color to be that orange color.
Of course, it looks pretty ugly right now.
Um, you probably wouldn't want to pick a color like this, or you would probably want to go with a
color scheme that matches your game.
But at least Roblox Studio gives you the options to modify your chat window, your chat input bar,
as well as bubble chats in your game.
If you remember earlier, rich text also supports text labels.
So in this part right here I have a surface GUI with a text label inside of it.
And if we go and scroll down to where we get to the text section in the properties panel.
As you can see, there is an option here to enable rich text for this text label.
So if we go ahead and check mark that now any text that we input in here, if it has that rich text
stylization, like those little chunks of code to stylize your text, it will apply those effects onto
the text that will appear on our part.
So, for example, if I wanted to make a certain chunk of text bold, I could type a string in here.
Like this text is bold.
And let's say I want to make only the word right here bold.
Then I would put in those two, um, less than and greater than symbols, put it in a, B, and then
I also have to close this symbol as well.
So I put another set and I believe it would be slash b.
Actually.
Let's go ahead and take a look at the documentation of what specifically these have to be.
So here it says to insert or make a chunk of text bold in your string.
You start with a less than symbol and then be followed by a greater than symbol.
And then another less than with a slash, a, B, and then a greater than symbol.
So this opens the section of text you would like to bold.
And this closes the section of text that you would like to bold.
So if I go and hit enter, as you can see this text is bold.
And it only made this particular word right here bold.
We can of course also change the color.
We can add a stroke to this text and basically do whatever kind of manipulation we want to this particular
word right here that is inside of our string.
For example, if we would like to change the color of the font for a particular word, it says right
here, we have to open it with this word of font color.
And then inside of these two, um strings, we would have to pass a hex code representing the color
that we would like to apply to our text.
So let's go ahead and copy this.
And now back in studio, we can go ahead and paste it right here.
And let's go ahead and grab this closing section because you need to close these different chunks here
in the inverse way that you applied them.
So for example since this one is first that means we also need to close it last.
And since this one is second that means we need to close it first here.
But now we can go ahead and put in a hex code to represent what color we would like to change this word
to.
In order to pick a hex color, what we can do is we can open up our color editor.
We'll just pick a random color like this bright green, and we actually can grab it here.
It's labeled as HTML.
And we'll just copy that right here.
And then we're just going to cancel.
So it resets the text back to black.
And then we can go ahead and paste in that HTML code.
And then if we hit enter now our word has turned green.
This text is bold and it's green as well.
So this is how you can use rich text within your text labels and your surface guys.
You can use them in your billboard GUIs and you can use them on your screen guys.
So now let's go ahead and take a look at how to use those two callbacks that we looked at earlier in
the text chat service.
What I'm going to do is I'm going to create a new script inside of starter player script.
So we'll insert a new local script in here.
And at the top we can go ahead and grab the text chat service by using the Get Service function and
pass the text chat service.
And then I'm also going to go ahead and grab the player service for a reason.
You'll see in a little bit.
Now remember, in the text chat service, we had access to two callbacks that we could overwrite.
The first one was on an incoming message.
So we provide a function to this, which gets called when the text chat service is receiving an incoming
message.
And then we have another one for on bubble added.
And it says this function will be called when a bubble chat is about to be displayed.
So for on incoming message, we need to set it to a new lambda function.
And this function is actually going to be passed in argument.
And we're going to call this argument a message.
If we look in the Roblox documentation, as you can see here in the parameters section, it says that
any function connected to the on incoming message property is going to be passed to a text chat message,
and we can go ahead and click this and see what exactly this is.
And it says this is an immutable data object representing a text chat message.
And as you can see, it stores a bunch of different properties, such as a unique identifier for the
text chat message.
It gives us the filtered text for the user.
It gives us a reference to the origin text channel, a reference to the origin text source, as well
as a timestamp and some other properties we're not going to worry about, but we want to take a quick
look at what a text channel and a text sources.
So if we go ahead and click text channel here, it says represents a text chat channel contains text
sources as descendants.
So this text channel is going to contain sources from where messages are coming from.
Most commonly these are going to be different players in your game.
And to take a look at this, we're going to go hop back inside of studio and playtest our game.
Back in studio here.
If we go ahead and move over to our explorer window and open up the text chat service.
As you can see, we now have a new folder in here called Text Channels.
And these are the text channels that the property of our text chat message is referring to.
As you can see right here, here is a text channel instance.
And inside of here is a text source which would be my player.
And that stores my user ID for my player.
So this doesn't actually store a direct reference to my player, but instead this is a text source that
contains the user ID of where this message came from.
So that means if you wanted to grab the player when the on incoming message function is called, you
would have to use the function and the player service get player by user ID.
And that's exactly what we're going to use the player service for.
So since this function is going to be passed a text chat message instance, we can go ahead and index
this instance to get all of its properties.
For example, we can get the text source and it says a reference to the origin text source.
And from there we can go ahead and grab the player.
Now, since I want this function to only manipulate messages for players that have VIP in our game,
I first want to verify that this particular text chat message instance actually has a text source.
So we're going to check if this message does not have a text source.
So if not message dot text source then we're just going to go ahead and exit out of this function because
we're not going to care about that particular message.
It's not going to be from a player.
However, what we can do now is grab the player that sent this message.
If it does have a text source, and we're going to use the function in the player service, get player
by user ID and that will return the player with the given user ID if they are in game.
And then to get the user ID, we're going to pass message dot text source and the text source stores
that user ID for us.
So now we should be able to get a player here.
And this is where we can go ahead and check if this player has VIP.
The easiest way to do it is you would have a server script set an attribute on this player to tell us
whether or not they have VIP.
For example, you could call an attribute like has VIP and that would store a boolean of either true
or false.
So I'll create a variable called has VIP.
And it's going to be equal to my player.
And we're going to get attribute has VIP.
So if they have VIP then we want to go ahead and modify their message by adding an additional prefix
to their message.
What is a prefix.
Well I'll show you if we go and playtest our game.
A prefix is going to be anything that shows up before our message.
So if I type in the chat like hello!
Our username right here would be considered a prefix.
This is one of the prefixes that appear before our message appears in the chat.
So if I want to add a chat tag in here that says something like VIP, then I could insert it before
this prefix right here and then update that.
And that's where my function would return that new prefix.
Then internally the game will apply that prefix and then it'll show up inside of the chat.
Now, in order to do this, I have to create something called a text chat message property, and that
is created by the instance dot new function.
So I'm going to create a new variable called properties.
And it's going to be equal to instance dot new text chat message properties.
So if we want to modify a message by adding a prefix to it, we have to use a text chat message property.
Then inside of this property we can go ahead and add a prefix.
So this stores the prefix text to override.
Since this is a new property, there's not going to be anything in here.
So we can go ahead and set it to whatever we would like.
Now I want to go ahead and add a chat tag of VIP.
So I'll put VIP between two brackets.
And this is the prefix that I would like to insert before my players username.
However, if I just return only this text chat message properties, then it's going to ignore the other
prefix that is already attached to my message, which is my username, and I'll show you what I mean.
If I return just this properties that we just created and I go and play my game.
And if I were to type a message in the chat, nothing should happen because we don't have VIP.
So if I type hello, nothing happens.
But if I go to the server and let's say I give my player VIP by adding an attribute on my player, that
attribute was has VIP, which is a boolean, and we'll go ahead and set that equal to true.
Now I go back to my client and I type in another message.
As you can see, that property is overriding the previous prefix we had which was our username.
So now we're only seeing VIP appear inside of the chat.
And that's an issue if we want to both have our chat tag as well as our username, then there's something
we must do.
The thing we must do is that we have to grab the original prefix text that was stored inside of this
text chat message instance, and that's very easy to do with this prefix text.
We can go ahead and concatenate it with the message dot prefix text.
And this text would be storing our username.
And because I want there to be a gap between my username and this chat tag, I'm going to go ahead and
add a space right here.
Now we can go ahead and return this new set of text chat message properties, and we should have the
VIP tag as well as our username appear in the chat.
So if we go and play.
If I type in the chat.
Hello, nothing's going to happen because we don't have VIP.
But if I go to the server and give this player a VIP, so has VIP set that equal to true.
And then we go back and we say hello.
Now I have the VIP chat tag and as well as my username.
Now you might want to change the color of this VIP chat tag because it's the exact same color as my
username.
So this is where that rich text markup would come into play.
If I would like to change the color of this VIP message right here, then we can go ahead and insert
those two different tags one to open the tag and then one to close the tag so we know which block of
text we want to manipulate.
And to change the color, we have to do a less than symbol.
Remember it is font color and we have to set it equal to an HTML or hex color.
So that's going to be stored in another set of parentheses.
And then we close that off with this greater than symbol.
And then we have to insert a another tag in here.
And that's going to be another less than symbol and then a greater than symbol.
And we have to type in slash font.
So now any text between these two tags right here are going to have this color applied to it.
And we're getting a red underline here.
And I believe that's because we actually need to use single quotations here instead of double quotations.
There we go.
So between these two quotations is where we're going to insert that um, HTML or hex color code.
And to pick one we'll just go back to our text label and open up the text color editor.
And let's say we want their text chat message to be like, um, maybe, maybe we'll do like a nice blue,
something like that, maybe a little bit lighter.
Yeah, we'll do something like that.
We can go ahead and copy this.
And then we can go ahead and insert it right here and now.
Any VIP players in our game are going to have this VIP message right here in blue.
And then I'll make sure to add my extra space outside right here and now if we go and play test the
game, we should have a blue VIP tag instead of an orange VIP tag.
Let me give my player VIP.
And then we can go back and type in hello.
And now we have a VIP blue tag next to our username.
Very cool.
The next property we can go ahead and take a look at is the on bubble added property, which we need
to provide a function for.
So in the text chat service we'll reference that property on bubble added and we'll set it equal to
another new function.
This function is also going to be passed a text chat message.
So we'll just call it message here.
And it's also passed one additional parameter which is called an adorni.
And that basically means exactly what part in our game is going to have this bubble appear over it.
So if you care about that, then it's also going to be passed in instance here where the bubble is going
to display over.
But if you don't care about it, then we can just ignore that parameter.
And we basically just do the exact same thing in here that we did for the on incoming message callback,
we first need to verify that there's a text source.
So if there is not a message dot text source then we'll just return.
Otherwise.
This time we need to create a new instance called a bubble chat message property.
So we'll call that properties and it's equal to instance dot new.
And that instance is a bubble chat message properties.
And then we can basically just copy the exact same thing that we did up here.
Get the player from the text source, check if the I VIP and if they have VIP then we can go ahead and
actually modify this property inside of this bubble chat message properties.
There's a whole bunch of stuff we can change.
For example, we can change the text color of the bubble.
We can go ahead and modify the background color.
We can change the font.
We can change basically a whole bunch of different stuff.
Let's go ahead and scroll in through here.
There's the text size.
We can um, add a tale, additional properties, stuff like that.
So that's pretty cool.
If we want to, let's say change the text color, we can update the text color three property equal
to a new color three.
And we'll do from RGB.
And maybe we want the color to be something like, I don't know, maybe we want it to be like a dark
orange.
We'll do something like that.
And then we can also go ahead and change the background color.
So in the properties dot background color we can provide another new color three from RGB.
And maybe we want the background to be like a darker shade of white.
So we'll make it like a dark gray.
Maybe we'll do something like that.
And then maybe we want to change the font.
Right.
So in the properties we can change the font face.
And this takes a data type called font.
So to create a new font we type out font.
And then there's a constructor in here to create a new font.
But we want to go ahead and grab a font from an enum.
So we pass an enum from the font enum to pass to this property font face.
So we'll do from enum, and then we can access enum dot font.
And then we can go ahead and pick whatever font we want inside of this enum.
So maybe we'll pick something like arcade.
So now we have modified this property.
We can go ahead and return it.
So we'll just return properties.
So now any player in our game that's going to have VIP when they have a bubble message appear over them,
we're going to change the text color, the background color of the bubble as well as the font.
And this is only going to happen for VIP players.
So if we go and play test the game.
And now if I go and chat in my game and I say something like hello!
As you can see, the bubble message that appears over my character is now this black color and this
orange color.
And realistically, you would have this local script on every single player that joins your game.
So every single player in the game can see these changes, such as the VIP chat tag, as well as the
Hello bubble message appearing over the player's character.
In 30 lines of code.
We have successfully modified any message that shows up in the chat window, or any message that appears
as a bubble over the player's head if they have the IP.
It's very easy to do, and there's a whole bunch of customization options that we are provided for modifying
chat messages.
And that's how you can use the text chat service to style and modify chat and bubble messages in your
game.
I hope you enjoyed and I'll see you in the next lecture.